<template>
	<view class="body">
		<u-navbar title="提现" :title-bold="true" title-color="#000" :border-bottom="false" custom-class="home-bg" :background="{ background: 'transparent' }"></u-navbar>

		<view class="flex align-center flex-around mt20">
			<view :class="['result-tap', resultIndex == 1 ? 'tap' : '']" @click="resultTap(1)">余额提现</view>
			<view :class="['result-tap', resultIndex == 2 ? 'tap' : '']" @click="resultTap(2)">收益提现</view>
		</view>
		<view class="button-result">
			<view class="top">
				<view class="left">到账银行卡</view>
				<view class="right" v-if="item">
					<!-- <u-avatar src="/static/main/cs3.jpg" size="40"></u-avatar> -->
					<view class="right-name">
						<text>
							{{ item.bankName }}（{{ String(item.cardNumber).slice(-4) }}）
							<u-icon name="arrow-right" @click="show = true"></u-icon>
						</text>
						<text style="font-size: 20rpx; color: #777777">2小时内到账</text>
					</view>
				</view>
				<view class="right" v-else>
					暂无
					<u-icon name="arrow-right" @click="show = true"></u-icon>
				</view>
			</view>

			<!-- 提现金额选择区域 -->
			<view class="recharge-section">
				<view class="section-title">提现金额:</view>

				<!-- 自定义金额输入 -->
				<view class="custom-input-wrapper">
					<text class="left">￥</text>
					<view style="margin-left: 15rpx; width: 100%">
						<input type="number" @focus="handleFocus" @input="validateAmount" placeholder="请输入自定义金额" v-model="customAmount" style="width: 100%" />
					</view>
				</view>

				<!-- 说明文本 -->
				<view class="description">{{ config.remark }}</view>
			</view>

			<!-- 确认提现按钮 -->
			<view class="action-section">
				<u-button class="confirm-btn" type="primary" shape="circle" @tap="handleConfirm">确认提现</u-button>
			</view>

			<u-popup v-model="show" mode="bottom" border-radius="30" :closeable="true" length="520rpx">
				<view class="show-body">
					<view class="show-top">
						<text>选择到账银行卡</text>
						<span>请留意各银行到账时间</span>
					</view>

					<view class="banks">
						<view v-for="(item, index) in mybankList">
							<view style="margin: 30rpx 30rpx 0 10rpx; display: flex; align-items: center; justify-content: space-between" @click="bank(index)">
								<view class="right" style="margin-left: 10rpx">
									<u-avatar src="/static/main/cs3.jpg" size="40"></u-avatar>
									<view class="right-name">
										<text>{{ item.bankName }}（{{ String(item.cardNumber).slice(-4) }}）</text>
										<text style="font-size: 20rpx; color: #777777">2小时内到账</text>
									</view>
								</view>
								<view v-if="bankIndex == index">
									<u-icon name="checkbox-mark"></u-icon>
								</view>
							</view>
						</view>
					</view>

					<view class="bottom">
						<image src="/static/user/Frame(7).png" style="width: 40rpx; height: 40rpx" mode="aspectFill"></image>
						<text @click="addCardUrl">使用新卡提现</text>
					</view>
				</view>
			</u-popup>
		</view>
	</view>
</template>

<script>
import user from '@/api/user';
import { getCustomAmount } from '@/utils/utils.js';
export default {
	data() {
		return {
			resultIndex: 1,
			bankIndex: 0,
			show: false,
			currentAmount: 0,
			customAmount: '',
			amountOptions: [],
			mybankList: [],
			total: 0,
			pageNum: 1,
			pageSize: 10,
			item: null,
			customAmountBool: true,
			config: {}
		};
	},

	components: {},
	props: {},

	/**
	 * 生命周期函数--监听页面加载
	 */
	onLoad: function (options) {
		this.getAxRechargeRule();
		this.getMybanklist();
		this.getConfigBy7()
	},
	onReachBottom() {
		if (this.total > this.pageNum * this.pageSize) {
			this.pageNum++;
			this.getMybankPage();
		}
	},
	methods: {
		getConfigBy7() {
			user.getConfigBy7().then((res) => {
				this.config = res.data;
			});
		},
		resultTap(row) {
			this.resultIndex = row;
		},
		validateAmount() {
			this.customAmountBool = false;
			const customAmount = getCustomAmount(this.customAmount);
			if (!customAmount) {
				return;
			}
			this.customAmount = customAmount;
			this.customAmountBool = true;
		},
		handleFocus() {
			this.currentAmount = 0;
		},
		addCardUrl() {
			uni.navigateTo({
				url: '/pages/user/card/addCard'
			});
		},
		selectAmount(value) {
			this.currentAmount = value;
			this.customAmount = ''; // 清空自定义输入
		},
		bank(row) {
			this.bankIndex = row;
			this.item = this.mybankList[this.bankIndex];
			this.show = false;
		},
		getAxRechargeRule() {
			user.getAxRechargeRule().then((res) => {
				this.amountOptions = res.rows;
			});
		},
		getMybanklist() {
			user.getMybanklist({
				pageNum: this.pageNum,
				pageSize: this.pageSize
			}).then((res) => {
				this.mybankList = res.rows;
				this.total = res.total;
				this.item = this.mybankList[0];
			});
		},
		getMybankPage() {
			user.getMybanklist({
				pageNum: this.pageNum,
				pageSize: this.pageSize
			}).then((res) => {
				console.log(res);
				this.mybankList.push(...res.rows);
				this.total = res.total;
			});
		},
		handleConfirm() {
			if (!this.currentAmount && !this.customAmount) {
				uni.showToast({
					title: '请选择充值金额',
					icon: 'none'
				});
				return;
			}

			if (!this.customAmountBool) {
				uni.showToast({
					title: '金额格式错误（示例：12.34）',
					icon: 'error'
				});
				return;
			}

			let point = 0;
			if (this.customAmount) {
				point = this.customAmount;
			} else {
				point = this.currentAmount;
			}

			if (!this.item) {
				uni.showToast({
					title: '请选择提现银行卡',
					icon: 'error'
				});
				this.show = true;
				return;
			}

			uni.showLoading({
				title: '处理中...'
			});

			user.setDeposit({
				amout: point,
				bank: this.item.cardNumber,
				applyType: this.resultIndex //1余额，2收益
			}).then((res) => {
				uni.hideLoading();
				uni.showToast({
					title: '提现成功',
					icon: 'success'
				});
			});
		}
	},
	computed: {}
};
</script>
<style lang="scss" scoped>
.body {
	background: #f5f5f5;
}
.result-tap {
	width: 234rpx;
	height: 86rpx;
	background: #ffffff;
	border-radius: 24rpx 24rpx 24rpx 24rpx;
	border: 2rpx solid #f05a39;

	font-weight: 600;
	font-size: 32rpx;
	color: #f05a39;

	display: flex;
	align-items: center;
	justify-content: center;
}
.tap {
	background: #ffe1da;
}
.button-result {
	background-color: #fff;
	height: 86vh;
	padding-top: 10rpx;
	margin-top: 30rpx;
	border-radius: 30rpx 30rpx 0 0;
}
.top {
	margin: 50rpx 30rpx;
	display: flex;
	align-items: center;
	justify-content: start;
	.left {
		font-weight: 550;
		font-size: 26rpx;
		color: #000000;
	}
}
.right {
	margin-left: 300rpx;
	display: flex;
	.right-name {
		margin-left: 10rpx;
		display: flex;
		flex-direction: column;
		font-size: 24rpx;
		color: #000000;
	}
}
.show-body {
	padding: 50rpx 50rpx 0 50rpx;
	.banks {
		height: 270rpx;
		overflow-y: auto;
	}
	.show-top {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		font-weight: 500;
		padding-bottom: 30rpx;
		text {
			font-size: 28rpx;
			color: #333333;
		}
		span {
			font-size: 24rpx;
			color: #777777;
		}
		border-bottom: 1px solid rgba(0, 0, 0, 0.2);
	}
	.bottom {
		display: flex;
		margin: 30rpx 0 0 20rpx;
		text {
			font-weight: 400;
			font-size: 26rpx;
			color: #333333;
			margin-left: 10rpx;
		}
	}
}

.recharge-section {
	margin-top: 30rpx;
	background-color: #fff;
	border-radius: 30rpx;
	padding: 30rpx;

	.section-title {
		margin-bottom: 30rpx;
		font-weight: 500;
		font-size: 28rpx;
		color: #333333;
	}

	.grid-wrapper {
		width: 100%;

		.grid-row {
			display: flex;
			justify-content: space-between;
			flex-wrap: wrap;
			margin-bottom: 20rpx;

			.grid-col {
				width: 28%;
				margin: 20rpx 0;
				.option {
					height: 120rpx;
					background-color: #f8f8f8;
					border-radius: 8rpx;
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;
					position: relative;

					.option-left {
						display: flex;
						align-items: center;
						font-weight: 500;
						font-size: 28rpx;
						color: #333333;
					}
					.option-price {
						margin-top: 10rpx;
						font-weight: 500;
						font-size: 20rpx;
						color: #777777;
					}

					&.active {
						border: 2rpx solid #ff6a54;
						background-color: #fff2f0;
					}
				}
			}
		}
	}

	.custom-input-wrapper {
		display: flex;
		align-items: center;
		height: 90rpx;
		border: 1rpx solid #eee;
		border-radius: 8rpx;
		margin-top: 30rpx;
		background: #f8f8f8;
		.left {
			font-weight: 500;
			font-size: 32rpx;
			color: #f05a39;
			margin-left: 20rpx;
		}
		.u-input {
			flex: 1;
			height: 100%;

			input {
				height: 100%;
				text-align: center;
			}
		}
	}

	.description {
		font-size: 24rpx;
		color: #999;
		margin-top: 30rpx;
		line-height: 1.5;
	}
}

/* 按钮区域样式 */
.action-section {
	padding: 40rpx 20rpx;

	.confirm-btn {
		background-color: #ff6a54;
		color: #fff;
		border-radius: 44rpx;
		font-size: 34rpx;
		height: 90rpx;
		line-height: 90rpx;
	}
}
</style>
